<template>
  <div class="article-detail__container" v-if="articleObj.content">
    <!-- Header 区域 -->
    <van-nav-bar
      fixed
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 文章信息区域 -->
    <div class="article-container">
      <!-- 文章标题 -->
      <h1 class="art-title">{{ articleObj.title }}</h1>

      <!-- 用户信息 -->
      <van-cell
        center
        :title="articleObj.aut_name"
        :label="timeAgo(articleObj.pubdate)"
      >
        <template #icon>
          <img :src="articleObj.aut_photo" class="avatar" />
        </template>
        <template #default>
          <div>
            <van-button
              v-if="articleObj.is_followed"
              @click="handleFollow(false)"
              type="info"
              size="mini"
              >已关注</van-button
            >
            <van-button
              v-else
              icon="plus"
              @click="handleFollow(true)"
              type="info"
              size="mini"
              plain
              >关注</van-button
            >
          </div>
        </template>
      </van-cell>

      <!-- 分割线 -->
      <van-divider></van-divider>

      <!-- 文章内容 -->
      <div class="art-content" v-html="articleObj.content"></div>

      <!-- 分割线 -->
      <van-divider>End</van-divider>

      <!-- 点赞 -->
      <div class="like-box">
        <van-button
          icon="good-job"
          type="danger"
          size="small"
          @click="handleLike(false)"
          v-if="articleObj.attitude === 1"
          >已点赞</van-button
        >
        <van-button
          icon="good-job-o"
          @click="handleLike(true)"
          type="danger"
          plain
          size="small"
          v-else
          >点赞</van-button
        >
      </div>
    </div>
    <comment-list />
  </div>
  <van-loading size="24px" v-else class="loading"> 加载中... </van-loading>
</template>

<script>
import {
  getArticleDetailApi,
  getConcernApi,
  getCancelApi,
  getLikeApi,
  getUnlikeApi,
} from "@/api/article";
import CommentList from "./CommentList.vue";
export default {
  name: "ArticleDetail",
  data() {
    return {
      articleObj: {},
    };
  },
  components: {
    CommentList,
  },
  /*
  组件缓存的目的(提高性能):
    1。保持组件的状态
    2。减少无效网络请求
  注意:
    1，组件一旦被缓存了，created()钩子只会在初始化的时候执行一次，destroyed()钩子一次都不执行
    2，要想知道组件是被激活了(切回来了)还是失活了(切走了)，借助2个专门配合组件缓存的钩子
      (1) activated: 监测组件激活
      (2) deactivated: 监测组件失活
    3.可以给keep-alive组件添加 include 或 exclude 属性，用来匹配哪些组件会被缓存 或 哪些组件不会被缓存
      写在include或exclude中的的字符串是组件的name属性，需要给对应的组件添加name属性
*/
  // 组件缓存时 created()钩子只会执行一次, destroyed()钩子一次都不执行
  // 需要使用activated()钩子来搭配使用
  // activated() {
  //   this.getArticleDetail();
  // },
  created() {
    this.getArticleDetail();
  },

  methods: {
    // 获取文章详情
    async getArticleDetail() {
      const resp = await getArticleDetailApi(this.$route.query.id);
      // console.log(resp);
      this.articleObj = { ...resp.data };
    },
    // 处理关注
    async handleFollow(flag) {
      try {
        flag
          ? await getConcernApi(this.articleObj.aut_id)
          : await getCancelApi(this.articleObj.aut_id);
        await this.getArticleDetail();
        flag
          ? this.$toast.success("关注成功")
          : this.$toast.success("取关成功");
      } catch (error) {
        flag ? this.$toast.fail("关注失败") : this.$toast.fail("取关失败");
      }
    },
    // 处理点赞
    async handleLike(flag) {
      try {
        flag
          ? await getLikeApi(this.articleObj.art_id)
          : await getUnlikeApi(this.articleObj.art_id);
        await this.getArticleDetail();
        flag
          ? this.$toast.success("点赞成功")
          : this.$toast.success("取消成功");
      } catch (error) {
        flag
          ? this.$toast.success("点赞失败")
          : this.$toast.success("取消失败");
      }
    },
  },
};
</script>

<style scoped lang="less">
.article-container {
  padding: 10px;
  margin-top: 46px;
}
.art-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}

.art-content {
  font-size: 12px;
  line-height: 24px;
  width: 100%;
  overflow-x: scroll;
  word-break: break-all;
  /deep/ img {
    width: 100%;
  }
  /deep/ pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

.van-cell {
  padding: 5px 0;
  &::after {
    display: none;
  }
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f8f8f8;
  margin-right: 5px;
  border: none;
}

.like-box {
  display: flex;
  justify-content: center;
}
.loading {
  margin-top: 50px;
  text-align: center;
}
</style>
